<template>
	<div class="pageList">
		<Topic title="公告列表" />
		<div class="list_left">
			<div class="item" v-for="(item, index) in leftData" :key="1 + index">
				<image :src="item.url" style="width: 100%;height:95px"></image>
				<div class="item_name">{{ item.title }}</div>
			</div>
		</div>
		<div class="list_right">
			<div class="item" v-for="(item, index) in rightData" :key="1 + index">
				<image :src="item.url" style="width: 100%;height:95px"></image>
				<div class="item_name">{{ item.title }}</div>
			</div>
		</div>
		<div class="notHave_data" v-if="!listData.length">
			<image src="../../../static/kongshuju.png" class="kongshuju"></image>
			<text>暂无数据</text>
		</div>
		<h4 class="noMore_text" v-if="noMore">没有更多了...</h4>
	</div>
</template>
<script>
import Topic from '../../Components/Topic.vue'
import { post } from '../../../tools/request'
export default {
	components: {
		Topic
	},
	data() {
		return {
			total: 0,
			pageNo: 1,
			pageNum: 10,
			listData: [],
			leftData: [],
			rightData: [],
			noMore: false
		}
	},
	mounted() {
		// 初始化请求list数据
		// this.getMore(true)
		/* 系统公告接口 */
		uni.request({
			url: this.$serverUrl + '/apiNotice/list',
			method: 'GET',
			header: {
				'token': uni.getStorageSync('token')
			},
			success: (res) => {
				console.log('系统广告', res.data.data)
				if (res.data.data.length > 0) {
					this.listData = res.data.data
					this.listData.forEach((element, index) => {
						if (index % 2 === 0) {
							this.rightData.push(element)
						} else {
							this.leftData.push(element)
						}
					});
				}
				
			}
		});
	},
	methods: {
		// 获取更多数据 flag:是否是第一次加载
		getMore(flag=false) { 
			if(!flag&&this.listData.length>=this.total){
				console.log('没有更多了')
				return 
			}
			uni.showLoading({
					title: '加载中',
				})
			setTimeout(() => {
				const list = Array(10).fill({
					name: '测试数据',
					url: 'https://t7.baidu.com/it/u=1732966997,2981886582&fm=193&f=GIF',
					level2: '小标题'
				})
				this.listData = this.listData.concat(list)
				this.listData.forEach((element, index) => {
					if (index % 2 === 0) {
						this.rightData.push(element)
					} else {
						this.leftData.push(element)
					}
				});
				this.total = 25
				if(this.listData.length>=this.total){
					this.noMore = true
				}
				uni.hideLoading();
			},200);
			console.log('加载更多')
		}
	},
}
</script>

<style lang="scss" scoped>
.pageList {
	padding: 0px 20px 40px;
	box-sizing: border-box;
	width: 100%;
	position: relative;
	.notHave_data{
		width: 100%;
		height: 250px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.kongshuju{
			width: 50%;
			height: 50%;
		}
	}
	.noMore_text {
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
	}

	.list_left {
		width: 47%;
		float: left;
	}

	.list_right {
		width: 47%;
		float: right;
	}

	.item {
		overflow: hidden;
		width: 100%;
		box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, .08);
		margin-bottom: 10px;
		border-radius: 10px;
		height: 8rem;

		.item_name {
			padding-left: 10px;
			font-size: 15px;
			line-height: 25px;
		}
	}

	.list_left .item:nth-child(2n) {
		height: 8rem;
	}

	.list_right .item:nth-child(2n+1) {
		height: 8rem;
	}
}</style>